<!-- home -->
<template>
  <div class="container">
    <van-nav-bar
      title="业绩审核"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <div style="margin: 5px;">
      <van-cell title="选择月份" required v-model="ssyf" @click="onDisplay2" is-link />
    </div>
    <div style="margin: 5px;">
      <van-cell title="选择部门：" required v-model="deptname" @click="showDept" is-link />

      <van-field
        label="业务员姓名："
        v-model="ywyname"
        @input="onchageYwyname"
        placeholder="请输入业务员"/>

    </div>

    <van-popup v-model="ssyfshow" round position="bottom" :style="{ height: '50%' }" >
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="onConfirmNy1"
        @cancel="oncancel1"
      />
    </van-popup>

    <van-cell title="审核标志：" title-style="width:30%;" required >
      <van-radio-group v-model="shflag" direction="horizontal" @change="onChangeShflag">
        <van-radio name="0">待审核</van-radio>
        <van-radio name="1">已审核</van-radio>
      </van-radio-group>
    </van-cell>

    <div class="box">
      <div class="rownr">
        <div style="width: 15%;text-align: center;padding:10px 0 ;font-weight:bold; ">业务员</div>
        <div class="shuxian"></div>
        <div style="width: 25%;text-align: center;padding:10px 0 ;font-weight:bold;">业务类型</div>
        <div class="shuxian"></div>
        <div style="width: 20%;text-align: center;padding:10px 0 ;font-weight:bold;">客户电话</div>
        <div class="shuxian"></div>
        <div style="width: 25%;text-align: center;padding:10px 0 ;font-weight:bold;">客户信息</div>
        <div class="shuxian"></div>
        <div style="width: 15%;text-align: center;padding:10px 0 ;font-weight:bold;">销售额</div>

      </div>
      <div  v-for="item in yphList " :key="item.index"  @click="showDetail(item)">
        <div :class="item.index % 2 == 0 ? 'rownr' : 'rownr1' " >
          <div style="width: 15%;text-align: center;padding:20px 0 ;">{{item.index + '、 ' +  item.ywyname}}</div>
          <div style="width: 25%;text-align: center;padding:20px 0 ;">
            <div>{{ item.ywlxname + ( item.ktlxname !== '' ? item.ktlxname : '') }}</div>
            <div>{{ ( item.dklxname?item.dklxname:'' )+ item.dknum + '个,' + (item.dyjlxname?item.dyjlxname:'') + (item.dybtypename?item.dybtypename:'') + (item.papertypename?item.papertypename:'') }}</div>
          </div>
          <div style="width: 20%;text-align: center;padding:10px 0 ;">
            <div style="padding-top: 15px ;"> {{item.shphone}}</div>
            <div style="padding-top: 5px ;color: red"> {{item.ktdate}}</div>

          </div>

          <div style="width: 25%;text-align: center;padding:20px 0 ;">
            <div> {{item.shareas}}</div>
            <div>{{item.shname}}</div>
          </div>
          <div style="width: 15%;text-align: center;padding:20px 0 ;color: red;">
            <div>{{item.zje}}</div>
            <div style="padding-top: 5px;">
              <van-tag :type="item.jhflag == '1' ? 'success':'danger'">{{item.jhflag == '1' ? '已激活': item.jhflag == '2' ? '已驳回': item.fsflag == '1' ? '已复审': item.fsflag == '2' ? '已驳回': item.csflag == '1' ? '已初审': item.csflag == '2' ?'已驳回':'未激活'}}</van-tag>
            </div>
          </div>
        </div>
      </div>
    </div>

    <van-action-sheet v-model="deptshow" :actions="deptactions" @select="onSelectDept" />

  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem, Calendar, Cell, Tag } from 'vant'
import { floatAdd, floatSub, floatMul, floatDiv } from '../../utils/NumberUtil'
import {
  addAchievements,
  queryUserInfo,
  queryDeptBusiTask,
  updateBusitask,
  queryYwyAchievements,
  queryMonthRanking,
  queryWeekRanking,
  getProvinceList,
  queryYearRanking,
  listAchDetail,
  examAchieList,
  delBusitask
} from '../../api/api'

import eventBus from '../../utils/eventbus'

export default {
  name: 'DkktList',
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      date: '',
      show: false,
      ywlxname: '',
      ywlx: '',
      dateshow: false,
      minDate: new Date(2020, 1, 1),
      maxDate: new Date(2029, 12, 31),
      zje: '',
      ywyname: '',
      currentDate: new Date(),
      postList: [],
      mbtask: 0,
      ybtask: 0,
      busiTaskList: [],
      tkshow: false,
      rqshow: true,
      kjflag: false,
      ssyfshow: false,
      rphList: [],
      yphList: [],
      nphList: [],
      ssyf2: '',
      ssyf: '',
      ssyfshow2: false,
      weekflag: '1',
      weekList: [],
      deptshow: false,
      deptid: '',
      deptname: '',
      deptactions: [{ id: '', name: '全部' }],
      active: 0,
      weekActive: 0,
      ssnf: '',
      csflag: '',
      fsflag: '',
      jhflag: '',
      shflag: '0'

    }
  },

  created() {
    console.log('执行create方法')
    this.shflag = '0'
    var dateNow = new Date()
    var year = dateNow.getFullYear() + ''
    var month = (dateNow.getMonth() + 1) + ''
    var day = dateNow.getDate() + ''
    var date = year + (month < 10 ? '-0' : '-') + month + '-' + day
    var ssyf = year + (month < 10 ? '0' : '') + month
    this.queryUserInfo()
    this.ssnf = year
    this.getProvinceList()
    const that = this
  },
  mounted() {
    console.log('执行mounted方法')

    setTimeout(() => {
      window.addEventListener('scroll', this.onScroll)
    }, 2000)
  },

  destroyed() {
    console.log('执行destroy方法')
    this.pageNum = 1
    this.yphList = []

    window.removeEventListener('scroll', this.onScroll)
  },

  activated() {

  },

  methods: {

    onScroll() {
      var url = this.$route.path
      if (url != '/dkkt') {
        return
      }

      if (document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight) {
        console.log('触底了')
        // 加载更多操作
        this.pageNum = this.pageNum + 1
        console.log('页码：', this.pageNum)
        this.queryUserInfo()
      }
    },

    addyj() {
      this.$router.push({ path: '/addyj', query: {}})
    },

    onDisplay1() {
      this.dateshow = true
    },

    onDisplay2() {
      this.ssyfshow = true
    },

    onDisplay3() {
      this.ssyfshow2 = true
    },

    onClose() {
      this.show = false
    },

    onConfirm(event) {
      this.dateshow = false
      this.date = this.formatDate(event)
      this.queryAchList()
    },

    formatDate(date) {
      const date1 = new Date(date)
      return `${date1.getFullYear()}/${date1.getMonth() + 1}/${date1.getDate()}`
    },

    onChangeShflag(e) {
      this.shflag = e
      this.yphList = []
      this.pageNum = 1
      this.queryAchList()
    },

    // 查询当前用户所在部门
    queryUserInfo() {
      console.log('查询用户')
      const param = {}
      const that = this
      const userid = this.$store.getters.userId
      param.userid = userid
      queryUserInfo(param).then(response => {
        if (response.code === 200) {
          this.deptname = '全部'
          this.postList = response.data.postList
          const posts = response.data.postList
          if (this.postList.length > 0) {
            for (var i = 0; i < posts.length; i++) {
              if (posts[i].postId == 12) {
                that.csflag = '1'
              }
              if (posts[i].postId == 13) {
                that.csflag = '1'
              }

              if (posts[i].postId == 11 || posts[i].postId == 1) {
                that.jhflag = '1'
              }
            }
          }
          this.queryAchList()
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    onchageYwyname() {
      this.queryAchList()
    },

    getProvinceList() {
      const param = {}
      getProvinceList(param).then(response => {
        if (response.code === 200) {
          const provinceList = response.rows
          if (provinceList) {
            for (var i = 0; i < provinceList.length; i++) {
              const temp = { id: provinceList[i].deptId, name: provinceList[i].deptName }
              this.deptactions.push(temp)
            }
          }
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    },

    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },

    oncancel() {
      this.dateshow = false
    },

    oncancel1() {
      this.ssyfshow = false
    },

    oncancel2() {
      this.ssyfshow2 = false
    },

    onConfirmNy1(event) {
      var year = event.getFullYear() + ''
      var month = (event.getMonth() + 1) + ''
      var date = year + (month < 10 ? '0' : '') + month
      this.ssyf = date
      this.ssyfshow = false
      this.queryAchList()
    },

    onChangeSsnf(e) {
      this.ssnf = e
      this.queryYearRanking()
    },

    queryAchList() {
      console.log('查询业绩')
      const param = {}
      param.ssyf = this.ssyf
      param.deptId = this.deptid
      param.ywyname = this.ywyname
      param.dkktflag = '1'
      param.csflag = this.csflag
      param.jhflag = this.jhflag
      param.shflag = this.shflag
      param.pageNum = this.pageNum
      param.pageSize = this.pageSize
      const that = this
      console.log('查询参数', param)
      examAchieList(param).then(response => {
        if (response.code === 200) {
          if (response.rows) {
            let yphList = []
            yphList = response.rows
            for (var i = 0; i < yphList.length; i++) {
              yphList[i].index = ((param.pageNum || 1) - 1) * (param.pageSize || 10) + i + 1
            }
            that.yphList = that.pageNum == 1 ? yphList : that.yphList.concat(yphList)
          }
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    showDept() {
      this.deptshow = true
    },

    showDetail(item) {
      this.$router.push({ path: '/dkktDetail', query: { item: item }})
    },

    onSelectDept(item) {
      this.deptid = item.id
      this.deptname = item.name
      this.deptshow = false
      if (this.active == 0) {
        this.queryAchList()
      }
      if (this.active == 1) {
        this.queryAchList()
      }
      if (this.active == 2) {
        this.queryAchList()
      }
      if (this.active == 3) {
        this.queryAchList()
      }
    }
  }
}
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: calc(100vh);
    background-color: #F0F4FE;
  }

  .navclass{
    background-color:#ffffff;
  }

  .box{
    background-color: #ffffff;
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .shuxian{
    width: 1px;
    height: 15px;
    line-height:10px;
    text-align: center;
    background: #B2B2B2;
    position: relative;
    margin-left: 10px;
    margin-top: 5px;
    border-radius: 5px;
  }

  .mubiao{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    right: 20px;
    position: fixed;
  }

  .columnr{
    display: flex;
    flex-direction: column;
    align-content: center;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
  }

  .rownr{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    vertical-align: center;
    text-align: center;
  }

  .rownr1{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    background-color: #F0f4f9;
    vertical-align: center;
    text-align: center;
  }

  .quyu{
    margin-top: 20px;
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
  }

  .fenge{
    width: 1px;
    height: 40px;
    line-height:20px;
    text-align: center;
    background: #B2B2B2;
    position: relative;
    margin-top: 10px;
    border-radius: 5px;
  }

  .yuangong{
    padding-bottom: 10px;
    margin:5px;
    width: 95%;
    height: auto;
    background-color: #F8FBFD;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
  }
</style>
